<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        总结：
            Vue监视数据的原理：
                1.Vue会监视data中所有层次的数据
                2.如何监测对象中的数据？
                    通过setter实现监视，且要在new Vue时就传入要监测的数据
                        (1).对象中后追加的属性，Vue默认不做响应式处理
                        (2).如果需要给后追加的属性做响应式，必须使用下面的API：
                            Vue.set(target, propertyName/index, value) 或
                            vm.$set(target, propertyName/index, value)

                3.如何监测数组中的数据？
                    通过包裹数组更新元素的方法实现，本质就是做了两件事：
                        (1).调用原生对应的方法对数组进行更新
                        (2).重新解析模板，进而更新页面

                4.在Vue修改数组中的某个元素一定要用如下方法：
                    (1).使用这些API：
                        push()  pop()   shift() unshift()   splice()    sort()  reverse()
                    (2).Vue.set() 或 vm.$set()

                特别注意：
                    Vue.set()和vm.$set() 不能给vm或vm的根数据对象 添加属性
     -->

    <div id ="app">
        <h1>学生信息</h1>

        <button @click="addAge">年龄+1岁 （事件函数）</button>
        <button @click="student.age++">年龄+1岁 （事件表达式）</button>

        <button @click="addSex">添加性别属性，默认值：男</button>

        <button @click="addFriend">在列表首位添加一个朋友</button> <br/><br/>

        <button @click="changeFirstFriendName">修改第一个朋友的名字为：张三</button>

        <button @click="addHobby">添加一个爱好</button>

        <button @click="changeFirstHobby">修改第一个爱好为：开车</button>
        <button @click="removeHobby">过滤掉爱好中的抽烟</button> <br/><br/>

        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                student: {
                    name:'tom',
                    age:18,
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry', age:35},
                        {name:'tony', age:36}
                    ]
                }
            },
            // 自定义计算属性
            computed: {},
            // 自定义方法
            methods: {
                // 添加一岁
                addAge() {
                    this.student.age++;
                },

                // 添加性别属性
                addSex() {
                    this.$set(this.student, 'sex', '男')
                },

                // 在列表首位添加朋友
                addFriend(){
                    this.student.friends.unshift({name:'james', age:20, sex:'男'})
                },

                // 修改第一个朋友的名字
                changeFirstFriendName(){
                    // 方法一
                    this.student.friends[0].name = '张三'

                    // 方法二
                    // const oldAge = this.student.friends[0].age
                    // this.$set(this.student.friends, 0, {name:'张三', age:oldAge})
                },

                // 添加一个爱好
                addHobby(){
                    // 方法一
                    this.student.hobby.push('学习')

                    // 方法二
                    // this.$set(this.student.hobby, 3, '学习')
                },

                // 修改第一个爱好
                changeFirstHobby() {
                    // 方法一
                    this.student.hobby.splice(0, 1, '开车')

                    // 方法二
                    // this.$set(this.student.hobby, 0, '开车')
                },

                // 过滤掉爱好中的抽烟
                removeHobby() {
                    this.student.hobby = this.student.hobby.filter((p)=>{
                        return p !== '抽烟'
                    })
                }
            }
        });
    </script>
</body>
</html>